import { Component } from "react";
import AddTodo from "./components/addTodo";
import List from "./components/List";
import Footer from "./components/footer";

class Chapter15 extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        todos: [],
    };
    addTodo = (todo) => {
        this.setState({
            todos: [todo, ...this.state.todos],
        });
    };
    deleteTodo = (id) => {
        this.setState({
            todos: this.state.todos.filter((todo) => todo.id !== id),
        });
    };
    toggleTodo = (id) => {
        this.setState({
            todos: this.state.todos.map((todo) => {
                if (todo.id === id) {
                    return {
                        ...todo,
                        completed: !todo.completed,
                    };
                }
                return todo;
            }),
        });
    };
    render() {
        const { title } = this.props;
        return (
            <div className="wrapper wrapper3">
                <div className="page-header">
                    <h3>{title}</h3>
                </div>
                <div className="page-content">
                    <AddTodo addTodo={this.addTodo} />
                    <List
                        todos={this.state.todos}
                        deleteTodo={this.deleteTodo}
                        toggleTodo={this.toggleTodo}
                    />
                    <Footer todos={this.state.todos} />
                </div>
            </div>
        );
    }
}

export default Chapter15;
